<!-- 新增产品 -->
<template>
    <div class="addMask">
        <el-dialog v-model="open" :title="title" width="500">
            <el-form :model="formData" ref="formRef" label-width="110px" :rules="rules">
                <el-form-item label="产品名称：" prop="name">
                    <el-input v-model="formData.name" style="width: 300px"></el-input>
                </el-form-item>

                <el-form-item label="属性名称：" prop="mobile">
                    <el-input type="number" v-model="formData.mobile" style="width: 300px"></el-input>
                </el-form-item>

                <el-form-item label="备注" prop="status">
                    <el-input v-model="formData.status" style="width: 300px"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="danger" @click="handleDialog">取消</el-button>
                    <el-button type="primary" @click="submitForm">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import api from "@/api/index.js";
import { ElMessage } from "element-plus";
const emit = defineEmits(['init'])
// 初始化
const open = ref<boolean>(false);
// 表单验证规则
const rules = {
    name: [
        { required: true, message: "请输入姓名", trigger: "blur" },
        { min: 2, max: 4, message: "长度在 2 到 4 个字符", trigger: "blur" }
    ],
    mobile: [
        { required: true, message: "请输入手机号", trigger: "blur" },
        {
            validator: (rule, value, callback) => {
                if (!value) {
                    callback(new Error("请输入手机号"));
                } else if (!/^1[3-9]\d{9}$/.test(value)) {
                    callback(new Error("请输入正确的手机号"));
                } else {
                    callback();
                }
            },
            trigger: "blur"
        }
    ],
    status: [
        { required: true, message: "请选择状态", trigger: "change" }
    ],
};

// 通过id判断添加还是修改
const title = computed(() => {
    if (formData.value.id) {
        return "编辑产品（spu）";
    }
    return "新增属性";
})

// formData类型
interface FormData {
    id?: string;
    name: string;
    status: string;
    mobile: string;
    gender: string;
    identity_card_number: string;
}
// 表单数据
const formData = ref<FormData>({
    name: "",
    status: "",
    mobile: "",
    gender: "",
    identity_card_number: "",

});

const handleDialog = (item: FormData) => {
    if (item) {
        // 编辑时的数据处理
        formData.value = {
            id: item.id,
            name: item.name,
            mobile: item.mobile,
            status: item.status,

        };


    } else {
        // 新增时重置表单
        formData.value = {
            name: "",
            mobile: "",
            status: "",

        };

    }
    open.value = !open.value;
};

// 修改提交表单方法
const submitForm = async () => {
    if (!formRef.value) return;

    try {
        await formRef.value.validate();

        // 提交数据
        const res = await api.account[formData.value.id ? 'updateaccountUser' : 'ADDaccountUser']({
            ...formData.value
        });

        if (res.code === 0) {
            ElMessage.success(formData.value.id ? '运营账号编辑成功' : '运营账号添加成功');
            emit('init');
            open.value = false;
        } else {
            ElMessage.error(res.msg || '操作失败');
        }
    } catch (error) {
        console.error(error);

    }
};

// 提交表单
const formRef = ref(null);

defineExpose({
    handleDialog,
});
</script>

<style lang="scss" scoped></style>
